// 将此文件内容复制到App.js，运行npm start即可查看效果。
import React, { useCallback } from 'react';
import {
    ReactFlow,
    Handle,
    useNodesState,
    useEdgesState,
    addEdge,
} from 'reactflow';
import 'reactflow/dist/style.css';

// 自定义节点组件
const InfoNode = ({ data }) => {
    return (
        <div className="react-flow__node-default">
            {data.label}
        </div>
    );
};

const nodeTypes = {
    infoNode: InfoNode,
};

// 节点配置
const infoNode = {
    id: 'info-node-1',
    type: 'infoNode',
    data: { label: 'Info Node' },
    position: { x: 250, y: 100 },
};

const initialNodes = [infoNode];
const initialEdges = [];

export default function App() {
    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

    const onConnect = useCallback(
        (params) => setEdges((eds) => addEdge(params, eds)),
        [setEdges]
    );

    const handleNodeDragStart = (event, node) => {
        console.log('Node drag started:', node);
    };

    const handleNodeDrag = (event, node) => {
        console.log('Node dragging:', node);
    };

    const handleNodeDragStop = (event, node) => {
        console.log('Node drag stopped:', node);
    };

    return (
        <div style={{ width: '100vw', height: '100vh' }}>
            <ReactFlow
                nodes={nodes}
                edges={edges}
                nodeTypes={nodeTypes}
                onNodesChange={onNodesChange}
                onEdgesChange={onEdgesChange}
                onConnect={onConnect}
                onNodeDragStart={handleNodeDragStart}
                onNodeDrag={handleNodeDrag}
                onNodeDragStop={handleNodeDragStop}
                fitView
            />
        </div>
    );
}
